<!DOCTYPE html>
<html lang="en">

<head>
    <title>上传资料</title>
    <#include "/toupiao/components/meta.html" />
    <#include "/toupiao/components/stylesheets.html" />
    <link rel="stylesheet" href="/toupiao/stylesheets/join.css?v=2">
</head>

<body>
    <div id="app">
        <div class="am-g form-item">
            <label class="am-u-sm-2 am-form-label">标题</label>
            <div class="am-u-sm-10 input-field">
                <input type="text" id="title" placeholder="请输入标题" v-model="title">
            </div>
        </div>
        <div class="am-g form-item-2">
            <label class="am-form-label">地址</label>
            <div class="input-field">
                <textarea id="address" placeholder="请输入地址" v-model="address" rows="2"></textarea>
            </div>
        </div>
        <div class="form-item-2">
            <label class="am-form-label">封面</label>
            <div class="cover" v-if="cover == ''">
                <div class="cover-upload" @click="selectCover">
                    <i class="am-icon-plus"></i>
                </div>
            </div>
            <div class="cover" v-else>
                <div class="cover-img fillimg">
                    <img :src="cover" @click="selectCover" />
                    <button type="button" class="am-close" @click="deleteCover">&times;</button>
                </div>
            </div>
        </div>
        <div class="form-item-2">
            <label class="am-form-label">宣传图</label>
            <ul class="am-avg-sm-4 gallery">
                <li v-for="(item, index) in logos">
                    <div class="gallery-item fillimg">
                        <img :src="item" @click="changeImg(index, 0)" />
                        <button type="button" class="am-close" @click="deleteImg(index, 0)">&times;</button>
                    </div>
                </li>
                <li v-if="logos.length < imgLimit">
                    <div class="gallery-upload" @click="selectImg(0)">
                        <i class="am-icon-plus"></i>
                    </div>
                </li>
            </ul>
        </div>
        <div class="form-item-2">
            <label class="am-form-label">详情图</label>
            <ul class="am-avg-sm-4 gallery">
                <li v-for="(item, index) in images">
                    <div class="gallery-item fillimg">
                        <img :src="item" @click="changeImg(index, 1)" />
                        <button type="button" class="am-close" @click="deleteImg(index, 1)">&times;</button>
                    </div>
                </li>
                <li v-if="images.length < imgLimit">
                    <div class="gallery-upload" @click="selectImg(1)">
                        <i class="am-icon-plus"></i>
                    </div>
                </li>
            </ul>
        </div>
        <div class="form-submit">
            <a href="javascript:" class="am-btn am-btn-default" role="button" id="submit-button" @click="submit">提交</a>
        </div>
    </div>
    <div class="bottom-copyright">
        <a href="http://www.zhen-yee.com/">此网站由 蓁奕互联网科技有限公司 开发</a>
    </div>
    <#include "/toupiao/components/scripts.html" />
    <#include "/toupiao/components/wxConfig.html" />
    <script src="https://cdn.bootcss.com/layer/3.1.0/mobile/layer.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            title: '',
            address: '',
            cover: '',
            coverServerId: '',
            imgLimit: 6,
            //宣传图 type:0
            logos: [],
            logoServerIds: [],
            //详情图 type:1
            images: [],
            imgServerIds: []
        },
        methods: {
            selectCover() {
                var self = this;
                wx.chooseImage({
                    count: 1, // 图片数限制
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function(res) {
                        var localId = res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        if (isAndroid_ios()) {
                            self.cover = localId;
                        } else {
                            wx.getLocalImgData({
                                localId: localId, // 图片的localID
                                success: function(res) {
                                    self.cover = res.localData; // localData是图片的base64数据，可以用img标签显示
                                }
                            });
                        }
                        wx.uploadImage({
                            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function(res) {
                                var serverId = res.serverId; // 返回图片的服务器端ID
                                self.coverServerId = serverId;
                            }
                        });
                        setTimeout("adjustImgs()", 500);
                    }
                });
            },
            deleteCover() {
                this.cover = '';
                this.coverServerId = '';
            },
            selectImg(type) {
                var self = this;
                var currentLength = 0;
                if (type == 0) {
                    currentLength = self.logos.length;
                } else {
                    currentLength = self.images.length;
                }
                wx.chooseImage({
                    count: self.imgLimit - currentLength, // 图片数限制
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function(res) {
                        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        for (var index in localIds) {
                            if (isAndroid_ios()) {
                                if (type == 0) {
                                    self.logos.push(localIds[index]);
                                } else {
                                    self.images.push(localIds[index]);
                                }
                            } else {
                                wx.getLocalImgData({
                                    localId: localIds[index], // 图片的localID
                                    success: function(res) {
                                        if (type == 0) {
                                            self.logos.push(res.localData); // localData是图片的base64数据，可以用img标签显示
                                        } else {
                                            self.images.push(res.localData);
                                        }
                                    }
                                });
                            }
                        }
                        self.syncUpload(localIds, type);
                        setTimeout("adjustImgs()", 500);
                    }
                });
            },
            syncUpload(localIds, type) {
                var self = this;
                var localId = localIds.pop();
                wx.uploadImage({
                    localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 0, // 默认为1，显示进度提示
                    success: function(res) {
                        var serverId = res.serverId; // 返回图片的服务器端ID
                        if (type == 0) {
                            self.logoServerIds.push(serverId);
                        } else {
                            self.imgServerIds.push(serverId);
                        }
                        if (localIds.length > 0) {
                            self.syncUpload(localIds, type);
                        }
                    }
                });
            },
            changeImg(index, type) {
                var self = this;
                wx.chooseImage({
                    count: 1, // 图片数限制
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function(res) {
                        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        var localId = localIds[0];
                        if (isAndroid_ios()) {
                            if (type == 0) {
                                self.logos.push(localId);
                            } else {
                                self.images.push(localId);
                            }
                        } else {
                            wx.getLocalImgData({
                                localId: localId, // 图片的localID
                                success: function(res) {
                                    // localData是图片的base64数据，可以用img标签显示
                                    if (type == 0) {
                                        self.logos.splice(index, 1, res.localData);
                                    } else {
                                        self.images.splice(index, 1, res.localData);
                                    }
                                }
                            });
                        }
                        wx.uploadImage({
                            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 0, // 默认为1，显示进度提示
                            success: function(res) {
                                // 返回图片的服务器端ID
                                if (type == 0) {
                                    self.logoServerIds.splice(index, 1, res.localData);
                                } else {
                                    self.imgServerIds.splice(index, 1, res.serverId);
                                }
                            }
                        });
                        setTimeout("adjustImgs()", 500);
                    }
                });
            },
            deleteImg(index, type) {
                var self = this;
                if (type == 0) {
                    self.logos.splice(index, 1);
                    self.logoServerIds.splice(index, 1);
                } else {
                    self.images.splice(index, 1);
                    self.imgServerIds.splice(index, 1);
                }
            },
            submit() {
                var self = this;
                if (self.title == "") {
                    layer.open({
                        content: '请输入标题',
                        btn: '确定'
                    });
                    return;
                }
                if (self.address == "") {
                    layer.open({
                        content: '请输入地址',
                        btn: '确定'
                    });
                    return;
                }
                if (self.coverServerId == "") {
                    layer.open({
                        content: '请选择封面',
                        btn: '确定'
                    });
                    return;
                }
                var logoIds = "";
                for (var index = 0; index < self.logoServerIds.length; index ++) {
                    logoIds += self.logoServerIds[index] + ";";
                }
                if (logoIds == "") {
                    layer.open({
                        content: '请选择宣传图',
                        btn: '确定'
                    });
                    return;
                }
                var imgIds = "";
                for (var index = 0; index < self.imgServerIds.length; index ++) {
                    imgIds += self.imgServerIds[index] + ";";
                }
                if (imgIds == "") {
                    layer.open({
                        content: '请选择详情图',
                        btn: '确定'
                    });
                    return;
                }
                layer.open({
                    type: 2,
                    content: '加载中'
                });
                axios.get('/toupiao/submit?activityCode=${(activity.code)!}&title=' + self.title + '&address=' + self.address + '&coverMediaId=' + self.coverServerId + '&logoMediaIds=' + logoIds + '&imageMediaIds=' + imgIds)
                    .then(function(response) {
                        layer.closeAll()
                        if (response.data.status == 200) {
                            layer.open({
                                content: '发布成功',
                                skin: 'msg',
                                time: 3
                            });
                            window.location.href = "/toupiao/${(activity.code)!}";
                        } else {
                            layer.open({
                                content: "发布失败：" + response.data.msg,
                                btn: '确定'
                            });
                        }
                    })
                    .catch(function(error) {
                        layer.closeAll()
                        layer.open({
                            content: "发布失败：" + error,
                            btn: '确定'
                        });
                    });
            }
        }
    })
    wx.ready(function() {
        var title = "${activity.shareTitle!}";
        var desc = "${activity.shareDesc!}";
        var link = "${host}/toupiao/${(activity.code)!}";
        var imgUrl = "${activity.shareImage!}";
        initWXShareAll(title, desc, link, imgUrl);
    });

    function isAndroid_ios() {
        // true: android; false: ios
        var u = navigator.userAgent,
            app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        return isAndroid == true ? true : false;
    }
    </script>
</body>

</html>